<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="~{inc/fragments :: header}">
</head>
<body>
<div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col">
            <p>
                <a href="/">返回首页</a>
            </p>
            <div class="card">
                <div class="card-header">
                    <h3>问题：<span th:text="${question.getTitle()}"></span></h3>
                    浏览数: <span class="badge badge-secondary" th:text="${question.views}"></span>
                </div>
                <div class="card-body" th:text="${question.getContent()}">
                </div>
                <div class="card-footer">
                    标签: <span id="tags"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="row" th:each="answer : ${answers}" style="margin-top: 15px;">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <span th:text="'#'+${answer.getId()}"></span>
                    <span th:text="${answer.getUser().getUsername()}" class="badge badge-secondary"></span>
                    <span><a th:href="'/q/'+${answer.getQuestionId()}+'/a-'+${answer.getId()}+'/edit'">编辑</a></span>
                    <div th:text="${answer.getContent()}"></div>
                </div>
            </div>
        </div>
    </div>

    <div th:if="${session.get('user')} != null" class="row" style="margin-top: 50px;">
        <div class="col">
            <div class="card">
                <div class="card-header">创建回答</div>
                <div class="card-body">
                    <form onsubmit="doSubmitAnswer();return false;">
                        <div class="form-group">
                            <label for="content">回答内容</label>
                            <textarea name="content2" id="content" rows="5" class="form-control"></textarea>
                            <small id="emailHelp" class="form-text text-muted">输入问题内容或描述信息</small>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div th:if="${session.get('user')} == null" class="row" style="margin-top: 50px;">
        <div class="col">
            <div class="card">
                <div class="card-header">您尚未登录</div>
                <div class="card-body">
                    <a href="/login">去登录</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{inc/fragments :: js}"></div>
<script th:inline="javascript">
    var questionId = [[${question.getId()}]];

    function doSubmitAnswer() {
        var data = {questionId: questionId, content: $('#content').val()};
        $.ajax({
            url: '/api/answer/create',
            method: 'POST',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(data),
            success: function (resp) {
                console.info(resp);
                if (resp.code === 200) {
                    window.location.reload();
                } else {
                    alert(resp.message);
                    // if (confirm(resp.message)) {
                    // window.location.href = '/login';
                    // } else {
                    // 不确认。。
                    // }
                }
            },
            error: function (e) {
                console.info('ajax 请求出错了！');
                console.info(e);
            }
        });
    }

    $(document).ready(function () {
        console.info('页面加载完成。。。');

        // 请求标签数据，加载到页面里去
        $.ajax({
            url: '/api/question/getTags/' + questionId,
            dataType: 'json',
            success: function (resp) {
                var html = '';
                resp.data.map(function (tag) {
                    html += '<span class="badge badge-success">' + tag.label + '</span>';
                });
                $('#tags').html(html);
            }
        });
    });
</script>
</body>
</html>